<page-header title="客户标签" [breadcrumb]="breadcrumb" [action]="actionjump" [action-group]="false">
    <ng-template #breadcrumb>
        <ql-breadcrumb>
            <ql-breadcrumb-item>客户管理</ql-breadcrumb-item>
            <ql-breadcrumb-item>客户标签</ql-breadcrumb-item>
        </ql-breadcrumb>
    </ng-template>
    <ng-template #actionjump class="ql-text-right">
        <ql-button type="primary" routerLink="/customer/tag-create">新建标签</ql-button>
        <ql-button type="primary" routerLink="/customer/tag-search">搜索标签</ql-button>
        <ql-button type="primary" routerLink="/customer/tag-view">标签视图</ql-button>
    </ng-template>
</page-header>

<page-container>
    <div ql-row gutter="12">
        <ql-card header="标签统计" ql-col span="8">
            <div echarts [options]="tagOptions"   class="tag-card col"></div>
        </ql-card>
        <ql-card header="热门统计 TOP5" ql-col span="8">
            <div class="tag-card col around-span">
                <div class="row between-span text-center" *ngFor="let item of hotList; let index = index">
                    <div class="col-span-2">{{ index + 1 }}</div>
                    <div class="col-span-4">{{ item.tagName }}</div>
                    <div class="col-span-2">
                        <i style="color:darkcyan" class="fa fa-arrow-down" *ngIf="item.p === '下降'"></i>
                        <i style="color:darkcyan" class="fa fa-minus" *ngIf="item.p === '不变'"></i>
                        <i style="color:lightcoral" class="fa fa-arrow-up" *ngIf="item.p === '上升'"></i>
                    </div>
                    <div class="col-span-4">{{ item.tagType }}</div>
                </div>
            </div>
        </ql-card>

        <ql-card header="活跃标签" ql-col span="8">
          <!--<div echarts [options]="option"></div>-->
          <!--<div echarts  [options]="option" (chartInit)="onChartInit($event)" class="demo-chart"></div>-->

          <div class="cloud-image tag-card"></div>

        </ql-card>
    </div>
    <ql-card>
        <div ql-row type="flex">
            <ql-tree (modelChange)="onCatalogChange($event)" [accordion]="true" [model]="catalogList" ql-col span="6"></ql-tree>
            <data-table ql-col span="18" [model]="tagList"  [cursor]="cursorService" (cursor-change)="getCustTagList(catalogcode)">
                <ql-table-column model-key="tagname" label="标签名称">
                    <ng-template #slot let-scope="scope">
                        <a [routerLink]="['/customer/tag-detail', { id: scope.rowData.tagcode }]">{{ scope.rowData.tagname }}</a>
                    </ng-template>
                </ql-table-column>
                <ql-table-column model-key="tagcode" label="标签编码"></ql-table-column>
                <ql-table-column model-key="tagtype" label="标签分类"></ql-table-column>
                <ql-table-column model-key="frequency" label="使用频次"></ql-table-column>
                <ql-table-column model-key="tagexplain" label="标签说明"></ql-table-column>
                <ql-table-column model-key="createTime" label="创建日期"></ql-table-column>
                <ql-table-column model-key="count" label="客户数量"></ql-table-column>
                <ql-table-column model-key="tagstatus" label="标签状态"></ql-table-column>
            </data-table>
        </div>
    </ql-card>
</page-container>
